// Notifications 通知
import { useState } from "react";

// Soft UI Dashboard PRO React example components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
// @mui material components
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import Divider from "@mui/material/Divider";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Switch from "@mui/material/Switch";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import Grid from "@mui/material/Grid";

import PropTypes from "prop-types";
// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftButton from "components/SoftButton";
import SoftSelect from "components/SoftSelect";
import SoftAvatar from "components/SoftAvatar";
import ComplexProjectCard from "examples/Cards/ProjectCards/ComplexProjectCard";
import PlaceholderCard from "examples/Cards/PlaceholderCard";

// Soft UI Dashboard PRO React example components
import DataTable from "examples/Tables/DataTable";
import decor from "assets/images/team-1.jpg";
import telegramIconBind from "assets/icon/telegramIcon_bind.png";
import MetaMaskIconBind from "assets/icon/MetaMaskIcon_bind.png";

// custom styles for the DefaultItem
import { defaultItemIconBox, defaultItemIcon } from "examples/Items/DefaultItem/styles";

function Notifications() {
  const [interval, setInterval] = useState(true);

  return (
    <>
      <SoftBox>
        <SoftBox lineHeight={1}>
          <SoftTypography variant="h5" fontWeight="medium">
            Notifications
          </SoftTypography>
        </SoftBox>
        <SoftBox mt={{ xs: 1, lg: 3 }} mb={1}>
          <Grid container spacing={3}>
            <Grid item xs={12} md={6} lg={4}>
              <Card>
                <SoftBox p={2} pb="20px">
                  <SoftBox display="flex" alignItems="center">
                    <SoftAvatar
                      src={telegramIconBind}
                      alt="telegram-image"
                      size="md"
                      variant="rounded"
                      sx={{ m: "5px" }}
                    />
                    <SoftBox ml={1} lineHeight={0}>
                      <SoftBox lineHeight={0}>
                        <SoftTypography variant="h6" textTransform="capitalize" fontWeight="medium">
                          Telegram
                        </SoftTypography>
                      </SoftBox>
                    </SoftBox>
                    <Switch
                      checked={interval}
                      sx={{
                        ml: "auto",
                      }}
                    />
                  </SoftBox>
                  <SoftBox display="flex" mt={3} mb={2} lineHeight={1}>
                    <SoftTypography
                      variant="button"
                      fontWeight="regular"
                      color="text"
                      sx={{
                        height: "43px",
                      }}
                    >
                      Current Account:Sparklite
                    </SoftTypography>
                  </SoftBox>
                  <Divider />
                  <SoftBox display="flex" alignItems="center">
                    <SoftButton
                      size="small"
                      color="dark"
                      variant="gradient"
                      sx={{
                        mr: 2,
                        textTransform: "capitalize",
                      }}
                    >
                      Configure
                    </SoftButton>
                    <SoftButton size="small" color="light" variant="gradient">
                      Unlink
                    </SoftButton>
                  </SoftBox>
                </SoftBox>
              </Card>
            </Grid>
            <Grid item xs={12} md={6} lg={4}>
              <Card>
                <SoftBox p={2} pb="20px">
                  <SoftBox display="flex" alignItems="center">
                    <SoftAvatar
                      src={telegramIconBind}
                      alt="telegram-image"
                      size="md"
                      variant="rounded"
                      sx={{ m: "5px" }}
                    />
                    <SoftBox ml={1} lineHeight={0}>
                      <SoftBox lineHeight={0}>
                        <SoftTypography variant="h6" textTransform="capitalize" fontWeight="medium">
                          Webhooks
                        </SoftTypography>
                      </SoftBox>
                    </SoftBox>
                    <Switch
                      checked={interval}
                      sx={{
                        ml: "auto",
                      }}
                    />
                  </SoftBox>
                  <SoftBox display="flex" mt={3} mb={2} lineHeight={1}>
                    <SoftTypography
                      variant="button"
                      fontWeight="regular"
                      color="text"
                      sx={{
                        height: "43px",
                        fontSize: "16px",
                      }}
                    >
                      Please activate your channels to receive notifications of our Signal Price
                      alert.
                    </SoftTypography>
                  </SoftBox>
                  <Divider />
                  <SoftBox display="flex" alignItems="center">
                    <SoftButton
                      size="small"
                      color="dark"
                      variant="outlined"
                      sx={{
                        textTransform: "capitalize",
                      }}
                    >
                      Inactive
                    </SoftButton>
                  </SoftBox>
                </SoftBox>
              </Card>
            </Grid>
            <Grid item xs={12} md={6} lg={4}>
              <Card>
                <SoftBox p={2} pb="20px" minHeight="228px">
                  <SoftBox display="flex" alignItems="center">
                    <SoftBox
                      sx={[(theme) => defaultItemIconBox(theme, {}), { borderRadius: "50%" }]}
                    >
                      <Icon fontSize="default" sx={(theme) => defaultItemIcon(theme, {})}>
                        notifications
                      </Icon>
                    </SoftBox>
                    <SoftBox ml={1} lineHeight={0}>
                      <SoftBox lineHeight={0}>
                        <SoftTypography variant="h6" textTransform="capitalize" fontWeight="medium">
                          Notifications
                        </SoftTypography>
                      </SoftBox>
                    </SoftBox>
                    <Switch
                      checked={interval}
                      sx={{
                        ml: "auto",
                      }}
                    />
                  </SoftBox>
                  <SoftBox display="flex" mt={3} mb={2} lineHeight={1}>
                    <SoftTypography
                      variant="button"
                      fontWeight="regular"
                      color="text"
                      sx={{
                        height: "43px",
                      }}
                    >
                      Current Account: Spark@qq.com
                    </SoftTypography>
                  </SoftBox>
                </SoftBox>
              </Card>
            </Grid>
          </Grid>
        </SoftBox>
      </SoftBox>
      <SoftBox mt={6}>
        <SoftBox lineHeight={1}>
          <SoftTypography variant="h5" fontWeight="medium">
            Connect Wallet
          </SoftTypography>
        </SoftBox>
        <SoftBox mt={{ xs: 1, lg: 3 }}>
          <Grid container spacing={3}>
            <Grid item xs={12} md={6} lg={4}>
              <Card>
                <SoftBox p={2} pb="20px">
                  <SoftBox display="flex" alignItems="center">
                    <SoftAvatar
                      src={MetaMaskIconBind}
                      alt="MetaMask-image"
                      size="md"
                      variant="rounded"
                      sx={{ m: "5px" }}
                    />
                    <SoftBox ml={1} lineHeight={0}>
                      <SoftBox lineHeight={0}>
                        <SoftTypography variant="h6" textTransform="capitalize" fontWeight="medium">
                          Metamask
                        </SoftTypography>
                      </SoftBox>
                    </SoftBox>
                    <Switch
                      checked={interval}
                      sx={{
                        ml: "auto",
                      }}
                    />
                  </SoftBox>
                  <SoftBox display="flex" mt={3} mb={2} lineHeight={1}>
                    <SoftTypography
                      variant="button"
                      fontWeight="regular"
                      color="text"
                      sx={{
                        height: "43px",
                      }}
                    >
                      Connected Wallet: 0xB3....B5C8
                    </SoftTypography>
                  </SoftBox>
                  <Divider />
                  <SoftBox display="flex" alignItems="center">
                    <SoftButton
                      size="small"
                      color="info"
                      variant="gradient"
                      sx={{
                        textTransform: "capitalize",
                      }}
                    >
                      Connect
                    </SoftButton>
                  </SoftBox>
                </SoftBox>
              </Card>
            </Grid>
          </Grid>
        </SoftBox>
      </SoftBox>
    </>
  );
}

export default Notifications;
